<template>
  <div class="permissionBox">
    <div class="permissionBox-btn">
      <h3>配置列表</h3>
      <div class="list-r-8 flex">
        <slot></slot>
        <el-button type="" @click="refreshBtn(data, false, true)">全部查看</el-button>
        <el-button type="" @click="refreshBtn(data, false)">清除全部</el-button>
        <el-button type="" @click="refreshBtn(data, true)">全选</el-button>
        <el-button type="primary" @click="saveBtn">保存配置</el-button>
      </div>
    </div>
    <div class="permissionBox-head">
      <div class="tr">
        <div class="td">菜单权限</div>
        <div class="td">按钮权限</div>
        <div class="td">操作</div>
      </div>
    </div>
    <div class="permissionBox-main">
      <el-scrollbar>
        <div class="list-b-4">
          <PermissionBoxItem :data="data" @changeBtn="changeBtn" />
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useUserStore } from '@/store/index';
const userStores: any = useUserStore();
const router = useRouter();
const props = withDefaults(
  defineProps<{
    data?: any; //权限数据
    roleCode?: string; //权限code
  }>(),
  {

  },
);
const changeBtn = () => {

};
const saveBtn = () => {
  let _form: any = {
    roleCode: props.roleCode,
    roleButtonPowerData: [],//按钮组
    roleMenuPowerData: [],//菜单组
  }
  setData(props.data, _form)
  proxy.$api.SystemManage.SureConfigRolesPermission(_form)
    .then((res: any) => {
      if (proxy.$user.userRoleCode === props.roleCode) {
        proxy.$setItem('userButtons', _form.roleButtonPowerData);
        router.push('/login');
        proxy.$message('当前用户权限被更改，请重新登录');
      } else {
        proxy.$message('设置成功');
      }
    })
    .catch(() => { });
};
const setData = (arr: any, form: any) => {
  if (arr && arr.length > 0) {
    arr.forEach((el: any) => {
      if (el.isHavePermission) {
        form.roleMenuPowerData.push(el.menuCode)
      }
      if (el.buttons && el.buttons.length > 0) {
        el.buttons.forEach((button: any) => {
          if (button.isHavePermission) {
            form.roleButtonPowerData.push({
              buttonCode: button.buttonCode,
              menuCode: el.menuCode,
            })
          }
        });
      }
      setData(el.chrildren, form)
    });
  }
};
const refreshBtn = (arr: any, isHavePermission: boolean = true, isButton: boolean = false) => {
  if (arr && arr.length > 0) {
    arr.forEach((el: any) => {
      el.isHavePermission = isButton || isHavePermission
      if (el.buttons && el.buttons.length > 0) {
        el.buttons.forEach((button: any) => {
          button.isHavePermission = isHavePermission
        });
      }
      refreshBtn(el.chrildren, isHavePermission, isButton)
    });
  }
};
import PermissionBoxItem from './PermissionBoxItem.vue'; // 引入逻辑
const { proxy } = getCurrentInstance() as any;
import './pageCss.scss'; // 引入样式

</script>